<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="120px">
      <h2 style="text-align: center">仪器设备调整校准周期</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="设备名称" prop="deviceId">
            <el-select v-if="!($route.query.isInfo || isInfo)" filterable :disabled="$route.query.isEdit"
              v-model="formData.deviceId" placeholder="请选择设备名称" clearable @change="changeDevice"
              :style="{ width: '100%' }">
              <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceName"
                :value="item.deviceId" :disabled="item.disabled">
                <span style="float: left">{{ item.deviceName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.deviceCode
                }}</span></el-option>
            </el-select>
            <el-input disabled v-else v-model="formData.deviceName" placeholder="请输入设备名称" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格型号" prop="spec">
            <el-input disabled v-model="formData.spec" placeholder="请输入规格型号" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-input disabled v-model="formData.deviceCode" placeholder="请输入设备编号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出厂编号" prop="code">
            <el-input disabled v-model="formData.code" placeholder="请输入出厂编号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检定/校准周期" prop="oldParam">
            <el-input disabled v-model="formData.oldParam" placeholder="请输入检定/校准周期" clearable :style="{ width: '100%' }">
              <template slot="append">个月</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建议检定/校准周期" prop="param">
            <el-input v-model="formData.param" placeholder="请输入检定/校准周期" clearable :style="{ width: '100%' }">
              <template slot="append">个月</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="修改原因" prop="cause">
        <el-input v-model="formData.cause" type="textarea" placeholder="请输入修改原因" :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }">
        </el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }">
        </el-input>
      </el-form-item>
      <!-- v-if="btnShow" -->
      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm(1)">提交</el-button>
          <el-button v-if="!($route.query.isInfo || isInfo)&&formData.status != 'end'" type="primary" @click="submitForm(0)">暂存</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deviceList } from "@/api/device/device.js";
import { deptTreeSelect } from "@/api/system/user.js";

import {
  dataApproveAdd,
  updategdataApprove,
  dataApproveInfo,
} from "@/api/device/dataApprove.js";
export default {
  dicts: ["sys_site_list"],
  components: {},
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      deptOptions: [],
      deviceOptions: [],

      formData: {
        deptId: undefined,
        site: undefined,
        deviceCode: undefined,
        remark: undefined,
        cause: undefined,
        deviceName: undefined,
        spec: undefined,
        startTime: null,
        endTime: null,
        deviceId: undefined,
        code: undefined,
        param: undefined,
      },
      rules: {
        param: [
          {
            required: true,
            message: "请输入建议校准周期",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入出厂编号",
            trigger: "blur",
          },
        ],
        cause: [
          {
            required: true,
            message: "请输入修改原因",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请选择设备",
            trigger: "blur",
          },
        ],
        spec: [
          {
            required: true,
            message: "请输入规格型号",
            trigger: "blur",
          },
        ],
        site: [
          {
            required: true,
            message: "请选择位置",
            trigger: "change",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],

        startTime: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择结束时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.$route.query.isInfo = (this.$route.query.isInfo == 'false' || this.$route.query.isInfo == false) ? false : this.$route.query.isInfo
    this.getDeptTree();
    this.deviceList();
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
  },
  mounted() { },
  methods: {
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    changeDevice(i) {
      if (!i) return;
      let row = this.deviceOptions.find((e) => e.deviceId == i);
      if (row) {
        this.formData.deviceName = row.deviceName;
        this.formData.spec = row.spec;
        this.formData.deviceCode = row.deviceCode;
        this.formData.code = row.code;
        this.formData.oldParam = row.checkPeriod;
        this.formData.type = row.checkType;
      } else {
        this.formData.deviceName = undefined;
        this.formData.spec = undefined;
        this.formData.deviceCode = undefined;
        this.formData.code = undefined;
        this.formData.oldParam = undefined;
      }
    },
    deviceList() {
      deviceList({ deviceStatus: "1,3", busStatus: -1 }).then((response) => {
        this.deviceOptions = response.data;
      });
    },
    getinfo() {
      return dataApproveInfo(this.$route.query.id || this.id).then(
        (response) => {
          this.formData = response.data;
        }
      );
    },
    submitForm(e) {
      let query = JSON.parse(JSON.stringify(this.formData));
      if (query.status != 'end') {
        query.status = e == 0 ? 'draft' : 'audit'
      }
      if (e == 0) {
        if (!this.formData.deviceId) {
          this.$message.warning("请先选择设备！");
          return;
        }
        if (this.formData.deviceDataApproveId != undefined) {
            updategdataApprove(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            dataApproveAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        return
      }
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if (this.formData.deviceDataApproveId != undefined) {
            updategdataApprove(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            dataApproveAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
